<template>
  <su-page bg="#fff">
    <su-body>
      <!-- header -->
      <su-white-header v-if="detailData.BT" :title="detailData.BT" :prop="detailData.FSSJ"></su-white-header>
      <!-- detail -->
      <su-prop-group title="通知详细信息" v-if="detailData">
        <su-prop label="发送人">{{detailData.FSR || ''}}</su-prop>
        <su-prop label="发送单位">{{detailData.FSDW || ''}}</su-prop>
        <su-prop label="附件">
        </su-prop>
      </su-prop-group>
      <view class="file">
      	<view class="fileList" v-for="(item, index) in fileArr" :key="index">
      			<u--image radius="6" :src="item.previewUrl" width="70" height="70" mode="aspectFill" @click="previewImg(index)"></u--image>		
      	</view>
      </view>
			<view class="hfnr">
				<view>回复时间  {{detailData.HFSJ ? detailData.HFSJ : ''}}</view>
				<view>回复内容</view>
				<u--textarea disabled v-model="detailData.HFNR" autoHeight ></u--textarea>
			</view>
			<view class="file">
				<view class="fileList" v-for="(item, index) in fileArr_2" :key="index">
						<u--image radius="6" :src="item.previewUrl" width="70" height="70" mode="aspectFill" @click="previewImg(index)"></u--image>		
				</view>
			</view>
      <!-- loading -->
      <su-list-loading :loading="detailLoading"></su-list-loading>
    </su-body>
		<u-toast ref="uToast"></u-toast>
  </su-page>
</template>

<script>
	/* @Description: 主管部门查看企业的回执情况
	 * @Author: Yinchy
	 * @CreatDate: 2022-11-23 20:42:51
	 * @Params: 
	 */
	import { runSQL,uploadFilePath,fileIcon, previewPath } from '@/common/utils/wxutils'

  export default {
    data() {
      return {
				loading: false,
        recid:'',
        detailData: null,
        detailLoading: false,
				fileArr: [],
				fileArr_2: [],
				hfnr: "",
				fjArr: [],
				fileStr: ""
      }
    },
    onLoad(params) {
      this.detailData = params || null;
      this.recid = params.RECID;
      this.getDetail()
    },
    methods: {
      // 获取详情
      getDetail() {
        this.detailLoading = true;

				let fileidArrs = this.detailData.HFFJ ? this.detailData.HFFJ.split(',') : [this.detailData.HFFJ];
				fileidArrs.forEach(item => {
					runSQL(`select * from ssnydw.tbfile where fileid = '${item}';`).then(res => {
						if(res[0].length > 0){
							res[0].forEach(file=>{
								if(!(/png|jpg|jpeg/).test(file.FILENAME)){
									file.previewUrl = fileIcon
								}else{
									file.previewUrl = previewPath + file.FILEID
								}
							})
							this.fileArr_2  = this.fileArr_2.concat(res[0][0]);
						}
					})
				})
        this.detailLoading = false;
      },
			previewImg(idnex){
				
			}
			
    },
  }
</script>

<style lang="scss" scoped>
	.file {
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		padding: 20upx;
		margin-right: 20upx;
	}
	.hfnr {
		padding: 20upx;
	}
	.su-uploader{
	  display: flex;
	  flex-wrap: wrap;
	  &-handler{
	    width: 140upx;
	    height: 140upx;
			border: 1px solid #f7f7f7;
			margin-top: 4upx;
	    border-radius: 6px;
	    background-color: #f7f7f7;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    font-size: 32px;
	    color: #999;
	    margin-right: 20upx;
	    line-height: 1;
	    &:active{
	      opacity: 0.6;
	    }
	  }
	  
	  &-images{
	    width: 140upx;
	    height: 140upx;
	    border-radius: 6px;
	    position: relative;
	    &-delete{
	      position: absolute;
	      width: 54upx;
	      height: 54upx;
	      background-color: rgba(0,0,0,0.6);
	      display: flex;
	      justify-content: center;
	      align-items: center;
	      color: #fff;
	      z-index: 3;
	      top: 0;
	      right: 0;
	      border-radius: 0 6px 0 6px;
	      &:active{
	        opacity: 0.7;
	      }
	    }
	    &-item{
	      display: flex;
	      position: relative;
	      margin-right: 20upx;
	    }
	  }
	}
</style>
